<template>
	<view>
		<view class="pagess">
			<uNavbar title="开盒记录" bgColor="#E0DDDA" leftIconColor="#333333" :titleStyle="titleStyle"></uNavbar>

			<view class="record " v-for="(item1,index) in recordList" :key="item1.id">

				<view class="record_s " v-if="item1.item.length>0">
					<view class="record_info flex_dq" v-for="(item2,index2) in item1.item" :key="item2.id">
						<view class="record_box flex_ZC">
							<view class="record_box_list flex_c">
								<image class="quality1" v-if="item2.accessory_level == 1" src="../../static/image/tongbg.png" mode="aspectFill"></image>
								<image class="quality1" v-if="item2.accessory_level == 2" src="../../static/image/yinbg.png" mode="aspectFill"></image>
								<image class="quality1" v-if="item2.accessory_level == 3" src="../../static/image/goldbg.png" mode="aspectFill"></image>
								<image class="record_img" :src="item2.accessory_cover" mode="aspectFill"></image>
								<image  class="logo" :src="item2.phone_logo" mode=""></image>
								<view class="record_state flex_c">
									<text v-if="item2.status == 1">已装配</text>
									<text v-else >自动挂售</text>
								</view>
							</view>
							<view class="parts_txt overflow2 flex_c">
								<text class="level4" >{{item2.accessory_name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="record_info flex_dq" v-if="item1.item.length==0">
					<view class="record_box flex_ZC">
						<view class="record_box_list ">
							<image class="nbox" src="../../static/image/nbox.png" mode="aspectFill"></image>
						</view>
						<view class="parts_txt ">
							<text class="level1">未获得</text>
						</view>
					</view>
				</view>
				<view class=" times">
					<text>开盒时间：{{item1.create_time}}</text>
				</view>
			</view>
		<!-- 暂无数据 / 加载更多 -->
		<noDatas :xxxList="recordList"  :status="status"></noDatas>
		</view>
	</view>
</template>

<script>
	import {
		blindBoxRecord
	} from "../../api/myphone.js";
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				ids: '',
				recordList: [],
				titleStyle: {
					color: '#333333'
				},
			}
		},
		onLoad(e) {
			this.ids = e.id
			this.initDetail()
		},
		methods: {
			// 初始化
			initDetail() {
				let data = {
					page:this.page,
					installment_id: this.ids
				}
				blindBoxRecord(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.recordList = this.page == 1 ? list : this.recordList.concat(list);
						console.log(this.recordList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			goBack() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.page = 1,
				this.recordList = []
				that.initDetail()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initDetail()
			}
		}
	}
</script>

<style scoped>
	.pagess {
		width: 100%;
		min-height: 100vh;
		background: #E0DDDA;
	}

	.back {
		position: fixed;
		top: 30rpx;
		/* #ifdef APP */
		top: 60rpx;
		/* #endif */
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}

	.back>text {
		font-size: 36rpx;
		color: #333333;
	}

	.back>image {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
	}

	.mask {
		width: 100%;
		height: 140rpx;
	}

	.record {
		width: 690rpx;
		min-height: 282rpx;
		background:#F2F2F2;
		border-radius: 10rpx;
		margin: 30rpx auto;
		padding: 20rpx 0;
	}
	.record_s{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		/* overflow: auto; */
		/* background: pink; */
	}

	.record_info {
		padding-top: 30rpx;
	}

	.record_box {
		width: 170rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}

	.record_box_list {
		width: 128rpx;
		height: 128rpx;
		border-radius: 10rpx;
		position: relative;
	}

	.quality1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 128rpx;
		height: 128rpx;
		border-radius: 10rpx;
	}

	.record_img {
		width: 124rpx;
		height: 124rpx;
		border-radius: 10rpx;
	}
	.logo{
		position: absolute;
		width: 30rpx;
		height: 32rpx;
		position: absolute;
		z-index: 9;
		top: 4rpx;
		left: 8rpx;
		border-top-left-radius:8rpx ;
	}
	.record_state{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #00000050;
	}
	.record_state>text{
		font-size: 24rpx;
		color: #ffffff;
		width: 110rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 8rpx;
		background:#A68A6480;
	}
	.nbox{
		width: 150rpx;
		height: 130rpx;
	}

	.parts_txt {
		width: 120rpx;
		/* background: pink; */
		font-size: 24rpx;
		margin-top: 14rpx;
		text-align: center;
	}

	.level1 {
		color: #FDBE67;
	}

	.level2 {
		color: #9FC1FF;
	}

	.level3 {
		color: #FBF73B;
	}
	.level4 {
		color: #333333;
	}

	.times {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		color: #333333;
	}

	.times>text {
		margin-right: 24rpx;
	}
</style>